<template>
  <div class="v-input">
    <el-input v-model="inputValue" :placeholder="placeholder" :style="{ width: `${width}px`, height: `${height}px` }"
              :disabled="disabled" :clearable="clearable" :type="type" @change="change" @blur="blur" @focus="focus" :class="{ 'v-input-prefix': isPrefix, 'v-input-suffix': isSuffix }">
      <div slot="prefix" ref="prefix">
        <slot name="prefix"></slot>
      </div>
      <div slot="suffix" ref="suffix">
        <slot name="suffix"></slot>
      </div>
    </el-input>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'VInput',
    props: {
      // 提示语
      placeholder: {
        type: String,
        default: '请输入内容'
      },
      // 值
      value: {},
      // 宽度
      width: {
        type: Number,
        default: 300
      },
      // 高度
      height: {
        type: Number,
        default: 30
      },
      // 禁用
      disabled: {
        type: Boolean,
        default: false
      },
      // 清空
      clearable: {
        type: Boolean,
        default: false
      },
      // 类型
      type: {
        type: String,
        default: 'text'
      }
    },
    data () {
      return {
        inputValue: '',
        isPrefix: false,
        isSuffix: false
      }
    },
    watch: {
      inputValue (val) {
        this.$emit('on-watch', val)
      }
    },
    methods: {
      change (val) {
        this.$emit('on-change', val)
      },
      blur (val) {
        this.$emit('on-blur', val)
      },
      focus (val) {
        this.$emit('on-focus', val)
      }
    },
    mounted () {
      this.inputValue = this.value
      if (this.$refs.prefix.innerHTML) {
        this.isPrefix = true
      }
      if (this.$refs.suffix.innerHTML) {
        this.isSuffix = true
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .v-input
    font-size 12px
    .v-input-prefix
      .el-input__inner
        padding-left 30px
    .v-input-suffix
      .el-input__inner
        padding-right 30px
    .el-input__inner
      padding 0 15px
      height 100%
    .el-input__prefix, .el-input__suffix
      div
        height 100%
        position relative
        i
          position absolute
          top 50%
          margin-top -13px
    .el-input__suffix div i
      right 0
    input:-webkit-autofill
      font-size 12px
      background-color #FAFFBD
      background-image none
      color #000
      -webkit-box-shadow 0 0 0 1000px #fff inset
</style>
